// # AtlasView
// 图集组件
//
// className: AtlasView
//
// ## 配置
//
// 变量 | 类型 | required | 描述
// ----|------|----------|-----
// items | array，arrya里面包含src属性 | true | 显示的图片数组
//
// 例子：
//
// ```js
// {
//     type: "AtlasView",
//     title:'行走的力量 风光无限好',
//     items: [
//         {src:"/runtime/images/1.png",description:"描述1"},
//         {src:"/runtime/images/2.png",description:"描述2"}
//     ]
// }
// ```
define(['underscore', './BaseView', 'slick'], function(_, BaseView, Slick) {

  return BaseView.extend({
    type: 'AtlasView',
    render: function() {
        this.$el.empty();
        var _me = this,
        $atlas_el = $('<div class="atlas-photos"></div>'),
        $atlas_a = $('<a class="atlas-a"></a>'),
        $atlas_thumb = $('<div class="atlas-thumb"></div>'),
        $atlas_title = $('<h2 class="atlas-title"></h2>');

        //标题
        if (this.options.title) {
            $atlas_title.text(this.options.title);
            $atlas_a.append($atlas_title);
        }

        //图片集
        if (this.options.items) {
            var num = 0;
            this.options.items.forEach(function(item) {
                if (num++ < 3){
                    $atlas_thumb.append(_me._createItem(item));
                }else{
                    return true;
                }
            });

            //判断是否小于2张图片等情况
            var $img_el = $atlas_thumb.find('.atlas-imagediv');
            switch (num) {
                case 1:
                    $img_el.css('width','100%');
                    $img_el.css('height','calc((100vw - 30px)/3)');
                    break;
                case 2:
                    $img_el.css('width','50%');
                    $img_el.css('height','calc((52vw - 20px)/2)');
                    break;
                default:
                    $img_el.css('height','calc((34.3vw - 20px)*4/5)');
            }
        }

        $atlas_a.on('click', function(event) {
            _me._modalAtlasList();
        });

        $atlas_a.append($atlas_thumb);
        $atlas_el.append($atlas_a);
        this.$el.append($atlas_el);

        return this;
    },

    _createItem: function(item) {
        var atlasItem = [
            '<div class="atlas-imagediv">',
                '<img class="atlas-img" src="' + item.src + '" />',
            '</div>'
        ];
        return $(atlasItem.join(''));
    },

    _createAtlasItem: function(item) {
        var carouselItem = [
            '<div class="slick-imagediv">',
                '<img class="slick-img" src="' + item.src + '" />',
            '</div>'
        ].join('');

        return $(carouselItem)[0];
    },

    //弹出幻灯片
    _modalAtlasList: function() {
        var windowWidth = window.innerWidth,
            $atlas_list = $('<div class="atlas-list"></div>'),
            $atlas_top = $('<div class="atlas-top"></div>'),
            $atlas_top_back = $('<a class="atlas-top-back" href="javascript:void(0);"></a>'),
            description = this.options.items[0].description || '';
            atlas_footer = [
                '<div class="atlas-footer">',
                    '<h2 class="atlas-footer-h">' + description + '</h2>',
                    '<p class="atlas-footer-p">',
                        '<span class="atlas-span-current">1</span>',
                        '<span class="atlas_span_total">/' + this.options.items.length + '</span>',
                    '</p>',
                '</div>'
            ].join(''),
            $atlas_footer = $(atlas_footer),
            slick_out_wrapper = [
                '<div class="slick-out-wraper">',
                    '<div class="slick-container" style="width: ' + window.innerWidth + 'px"></div>',
                '</div>'
            ].join(''),
            $slick_out_wrapper = $(slick_out_wrapper);

        //返回按钮
        $atlas_top_back.on('click', function(event) {
            $atlas_list.css({
                "transition" : "all 0.5s ease",
                "-webkit-transition" : "all 0.5s ease",
                "transform" : "translate3d(" + (windowWidth) + "px, 0, 0)"
            });
            window.setTimeout(function() {
                $atlas_list.remove();
            }, 600);
        });

        $atlas_top.append($atlas_top_back);
        $atlas_list.append($atlas_top).append($atlas_footer).append($slick_out_wrapper);
        $('body').append($atlas_list);

        // create slick instance
        var $slick_el = $atlas_list.find('.slick-container');
        this.slick = $slick_el.slick({
            lazyLoad: 'ondemand',
            autoplay: false,
            swipeToSlide: true,
            dots: false,
            speed: 100,
            adaptiveHeight: true
        });

        if (this.options.items) {
            var me = this;
            setTimeout(function() {
                me.options.items.forEach(function(item) {
                    $slick_el.slick('slickAdd', me._createAtlasItem(item));
                });
                $slick_el.on('beforeChange', function(event,slick,currentSlide,nextSlide){
                    var description = me.options.items[nextSlide].description || '',
                        current = nextSlide + 1;
                    $atlas_list.find('.atlas-footer-h').text(description);
                    $atlas_list.find('.atlas-span-current').text(current);
                });
            }, 0);
        }

        //动画效果
        $atlas_list.css({
            "transition" : "none",
            "-webkit-transition" : "none",
            "transform": "translate3d(" + (windowWidth) + "px, 0, 0)"
        });

        window.setTimeout(function() {
            $atlas_list.css({
                "transition" : "all 0.5s ease",
                "-webkit-transition" : "all 0.5s ease",
                "transform" : "translate3d(0, 0, 0)"
            });
        }, 30);
    }
    });
});
